<template>
  <view class="tui-skeleton" :style="{height:height+'px'}">
    <view v-if="type === ''" id="top" ref="top" class="padding-lr-30 padding-top-24 padding-bottom-30">
      <top-search v-model="searchValue" placeholder="搜索司机" text="添加司机" @clear="clearSearch" @confirm="reload" @click="showModal(null,'addNew')" />
    </view>

    <!-- #ifndef APP-NVUE -->
    <scroll-view
      v-if="list.length"
      class="flex-column flex-item"
      :scroll-top="top"
      :style="{height:scrollHeight+'px'}"
      :refresher-triggered="refresh"
      lower-threshold="100"
      refresher-enabled
      enable-back-to-top
      scroll-y
      @scrolltolower="nextPage"
      @refresherrefresh="refresherrefresh"
    >
      <view class="flex-column padding-lr-30">
        <view v-for="(item, index) in list" :key="index">
          <driver-item :type="type" :item="item" :margin-top="type === '' ? !index ? '0' : '30rpx' : '30rpx'" @del="showModal($event,'del')" @setStatus="setStatus" />
        </view>
      </view>
      <l-footer :has-more="hasMore" />
    </scroll-view>
    <!-- #endif -->
    <!-- #ifdef APP-NVUE -->
    <list v-if="list.length" class="flex-column flex-item" :show-scrollbar="false" :scrollable="true" :offset-accuracy="5" loadmoreoffset="100" :bounce="false" fix-freezing="true">
      <cell v-for="(item, index) in list" :key="index">
        <view class="padding-lr-30">
          <driver-item :type="type" :item="item" :margin-top="type === '' ? !index ? '0' : '30rpx' : '30rpx'" @del="showModal($event,'del')" @setStatus="setStatus" />
        </view>
      </cell>
      <cell @appear="nextPage">
        <l-footer :has-more="hasMore" />
      </cell>
    </list>
    <!-- #endif -->
    <view v-else :style="{height:scrollHeight+'px'}">
      <tui-skeleton v-if="showSkeleton" :preload-data="preloadData" />
      <l-no-data v-else type="data" text="暂无数据" />
    </view>

  </view>
</template>

<script>
import DriverItem from '../driver-item/driver-item'
import request from '@/common/api/request'
import { mapGetters } from 'vuex'
import { getElementInfo } from '@/common/util'
import { getDriverList } from '@/common/api/driver'
import { preloadData } from '../../index'
export default {
  name: 'DriverPage',
  components: {
    DriverItem
  },
  props: {
    type: {
      type: [Number, String],
      default: 0
    },
    height: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      searchValue: '',
      list: [],
      page: 1,
      pageSize: 10,
      hasMore: true,
      showSkeleton: true,
      top: 0,
      refresh: false,
      scrollHeight: 0,
      preloadData
    }
  },
  computed: {
    ...mapGetters({
      userId: 'userId'
    })
  },
  watch: {
    height() {
      this.getHeight()
    }
  },
  methods: {
    getHeight() {
      if (this.type !== '') {
        this.scrollHeight = this.height
      } else {
        getElementInfo('#top', res => {
          this.scrollHeight = this.height - res.height
        }, this)
      }
    },
    // 获取列表
    async getDriverList() {
      const [err, res] = await getDriverList({
        status: this.type,
        autoCompanyId: this.userId,
        name: this.searchValue,
        page: this.page,
        limit: this.pageSize
      })
      uni.stopPullDownRefresh()
      this.refresh = false
      this.showSkeleton = false
      if (!request.errorCheck(err, res)) return false
      let driverList = res.data.data
      if (!driverList) {driverList = []; this.hasMore = false}
      if (driverList.length < this.pageSize) this.hasMore = false
	  
      if (this.page === 1) this.list = driverList
      else this.list.push(...driverList)
    },
    reload() {
      this.page = 1
      this.hasMore = true
	  this.list = []
	  this.showSkeleton = true
      this.getDriverList()
    },
    nextPage() {
      if (this.hasMore) {
        this.page++
        this.getDriverList()
      }
    },
    refresherrefresh() {
      this.refresh = true
      this.reload()
    },
    clearSearch() {
      this.searchValue = ''
      this.reload()
    },
    showModal(e, type) {
      this.$emit('showModal', {
        type,
        id: e
      })
    },
    setStatus(e) {
      this.$emit('setStatus', e)
    }
  }
}
</script>

<style scoped lang="scss">
@include setPadding(top,24);
</style>
